import styles from './category.less'
import Reading from "@/components/Reading"
import Tag from "@/components/Tag"
import CategoryList from '@/components/CategoryList'
import { CategoryModelState, IRouteComponentProps, useSelector } from 'umi'
import { useState, useEffect } from 'react'

let Category: React.FC<IRouteComponentProps<{ id: string }>> = ({ children, location, route, history, match }) => {
  let { category, categoryListLength } = useSelector((state: { category: CategoryModelState }) => state.category),
    [title, setTitle] = useState(''),
    { id } = match.params

  useEffect(() => {
    category.forEach(v => v.value === id && setTitle(v.label))
  }, [id])

  return <div className={styles.cate}>
    <section>
      <div className={styles.info}>
        <p><span>{title}</span> 分类文章</p><p>共搜索到 <span>{categoryListLength}</span> 篇</p>
      </div>
      <CategoryList children={children} location={location} route={route} routes={[]} history={history} match={match} />
    </section>
    <aside>
      <Reading />
      <Tag />
    </aside>
  </div>
}
export default Category